<template>
  <div class="login-panel">
    <n-space justify="end" v-if="!store.token">
      <n-input v-model:value="username" placeholder="用户名" size="small" />
      <n-input v-model:value="password" placeholder="密码" size="small" type="password" />
      <n-button class="login-btn" size="small" text @click="login" :loading="requesting.login">登录</n-button>
      <n-button class="register-btn" size="small" text @click="register" :loading="requesting.register">注册</n-button>
    </n-space>
    <n-space justify="end" v-else>
      <n-text class="user-welcome">你好，【{{userRole[store.role]?.text ?? '用户'}}】{{ store.username }}</n-text>
      <n-button class="logout-btn" size="small" text @click="logout">退出</n-button>
    </n-space>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useUserStore} from "@/stores/user.js";
import {useRequests} from "@/common/requests.js";
import {useMessage, useNotification} from "naive-ui";
import userRole from "@/common/userRole.js";

const store = useUserStore()
const requests = useRequests()
const message = useMessage()
const notify = useNotification()

const username = ref(null)
const password = ref(null)

const requesting = ref({
  fetchUserInfo: false,
  login: false,
  register: false
})

const fetchUserInfo = () => {
  requesting.value.fetchUserInfo = true
  requests.user.info().then(resp => {
    requesting.value.fetchUserInfo = false

    return resp
  }).then(resp => {
    if (resp.ret === 0) {
      store.$patch(resp.data)
    }
  }).catch(err => {
    console.log(err)

    notify.error({title: '出错了', content: err.toString(), duration: 3000})
  })
}

const login = () => {
  if (requesting.value.login) {
    return false
  }

  if (!username.value|| username.value.length === 0) {
    return message.info("请输入用户名")
  }

  if (!password.value|| password.value.length === 0) {
    return message.info("请输入密码")
  }

  requesting.value.login = true
  requests.user.login({username: username.value, password: password.value}).then(resp => {
    requesting.value.login = false

    return resp
  }).then(resp => {
    if (resp.ret === 0) {
      fetchUserInfo()
      store.$patch({username: username.value, token: resp.data})

      username.value = null
      password.value = null
      message.success("登录成功")
    } else {
      message.error(resp?.data ?? resp?.msg ?? '未知错误')
    }
  }).catch(err => {
    console.log(err)

    notify.error({title: '出错了', content: err.toString(), duration: 3000})
  })
}

const register = () => {
  if (requesting.value.register) {
    return false
  }

  if (!username.value|| username.value.length === 0) {
    return message.info("请输入用户名")
  }

  if (!password.value|| password.value.length === 0) {
    return message.info("请输入密码")
  }

  requesting.value.register = true
  requests.user.register({
    username: username.value,
    password: password.value,
    confirm_password: password.value
  }).then(resp => {
    requesting.value.register = false

    return resp
  }).then(resp => {
    if (resp.ret === 0) {
      username.value = null
      password.value = null
      message.success("注册成功")
    } else {
      message.error(resp?.data ?? resp?.msg ?? '未知错误')
    }
  }).catch(err => {
    console.log(err)

    notify.error({title: '出错了', content: err.toString(), duration: 3000})
  })
}

const logout = () => {
  store.$reset()
  message.success("退出成功")
}

onMounted(() => {
  fetchUserInfo()
})
</script>

<style lang="scss" scoped>
.login-panel {
  .login-btn {
    color: #ffec3d;
  }

  .register-btn {
    color: #fff;
  }

  .user-welcome {
    color: #fbd75e
  }

  .logout-btn {
    color: #871400;
  }
}
</style>
